<template>
  <div class="card">
    <nav class="card-nav">
      <Nav
        :tagList="tagList"
        :state="state"
        @handleChangeClick="handlebtnClick"
      ></Nav>
      <Input iptValue="可输入关键词搜索" @handleClick="handleSearchClick" />
    </nav>
    <main class="card-main">
      <Card :data="websiteList" @handleClick="handleClick"></Card>
      <Last v-if="websiteList.length === 0"></Last>
    </main>
  </div>
</template>

<script lang='ts'>
import { includes, filter } from "lodash";
import Input from "@/components/common/input.vue";
import Last from "@/components/common/last.vue";
import Nav from "@/components/common/nav.vue";
import Card from "@/components/common/card.vue";

export default {
  props: {
    title: {
      type: String,
      default: "暂无分类",
    },
    tagList: {
      type: Array,
      default() {
        return ["娱乐", "编程", "工具", "美化", "其它"];
      },
    },
    websiteData: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  components: {
    Input,
    Last,
    Nav,
    Card,
  },
  data() {
    return {
      websiteList: [],
      state: -1,
    };
  },
  mounted() {
    this.websiteList = this.websiteData;
  },
  watch: {},
  methods: {
    handleClick({ href }) {
      if (!href) return;
      window.open(href);
    },
    handlebtnClick(index, tag) {
      // 修改传递的下标，防止数据没接听成功
      this.state = index;
      this.websiteList = filter(this.websiteData, (item) => {
        if (tag === "其它" && !item.tag) return item;

        if (item.tag === tag) return item;
      });
    },
    handleSearchClick(value) {
      // 初始化nav栏状态
      this.state = -1;
      this.websiteList = filter(this.websiteData, (item) => {
        if (includes(item.title, value)) return item;
      });
    },
  },
};
</script>

<style lang='scss' scoped>
.card {
  h2 {
    padding: 0 10px;
    font-size: 16px;
    font-weight: bold;
    background: rgb;
  }
  &-nav {
    background: #ccc;
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
  }
  &-main {
    min-height: 120px;
    background: #ccc;
  }
}
</style>